import React, { forwardRef, useRef, useImperativeHandle } from "react";

// useRef如果加给一个元素，可以获取元素的dom节点
// useRef如果加给一个函数组件，可以配合forwordRef来获取子组件的dom节点
// 不能直接获取到子组件里面的属性和方法

// useImperativeHandle帮助父组件可以获取到子组件里面的属性和方法

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => {
    return {
      a: 1,
      fn() {
        console.log(123);
      },
    };
  });

  return <div ref={ref}>child子组件</div>;
});

const App = () => {
  const child = useRef();

  const handleClick = () => {
    console.log(child.current);
  };

  return (
    <>
      <h2>useImperativeHandle</h2>
      <button onClick={handleClick}>btn</button>
      <Child ref={child} />
    </>
  );
};

export default App;
